<extend name="../public/base"/>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/favicon.ico"/>
    <title>demo</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="/static/css/layui.css">
    <style>
        .main {
            width: 900px;
            text-align: center;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        .online_user_list {
            text-align: left;
        }
        .online_user_list .pos {
            background: pink;
            margin-top: 10px;
            height: 30px;
            line-height: 30px;
        }
        .send_container {
            margin-top: 20px;
        }
        .msg_content {
            margin-top: 10px;
            width: 100%;
            height: 300px;
            border: solid 2px #000;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="title">
            <span>当前房间人数：<span class="onlineNum">0</span>人</span>
        </div>
        <div class="online_user_list">
        </div>
        <div class="msg_content">

        </div>
        <div class="layui-form-item send_container">
            <input type="text" name="msg" placeholder="输入内容" class="layui-input" width="100%">
            <br/>
            <button type="button" class="layui-btn do_send">发送</button>
        </div>

    </div>


    <!-- 引入 layui.js -->
    <script src="/static/js/layui.js"></script>
    <!-- 引入 jquery.js -->
    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/web_socket.js"></script>
    <script src="/static/js/jquery.cookie.js"></script>
    <script src="/static/chat_js/base.js"></script>
    <script src="/static/chat_js/index.js"></script>
    <script>
        $(function() {
            // websocket重连
            connect();
            ws.onopen = function() {
                // 加入房间
                var room_id = getQueryString('room_id');
                ws.send(JSON.stringify({
                    type: 'join',
                    data: {room_id:room_id,token:token},
                }));
                // 发送信息
                $('.do_send').click(function () {
                    var msg = $('input[name="msg"]').val();
                    if (isEmpty(msg)) {
                        layer.msg('请先输入信息');
                        return false;
                    }
                    ws.send(JSON.stringify({
                        type: 'send_msg',
                        data: {
                            room_id : room_id,
                            content: msg,
                            token: token,
                        }
                    }));
                    $('input[name="msg"]').val('');
                    layer.msg('发送成功');
                    return false;
                });
            };
        });
    </script>

</body>
</html>
